<template>
  <div class="user_wrap">
    <div>
      <!--	<div class="user_wrap">-->
      <!--		<div class="red_top_bg">-->
      <!--			<div class="big_tit">{{$t('home.my')}}</div>-->
      <!--			<div class="msg" @click="signin()">-->
      <!--				<img v-if="!signinStatue" src="../img/user/signin.png">-->
      <!--				<img v-if="signinStatue" src="../img/user/signed.png">-->
      <!--			</div>-->
      <!--		</div>-->
      <!--		<div class="top_header_bg"></div>-->
      <!--		<div class="block_div flex_center top_header">-->
      <!--			<div class="user_detail">-->
      <!--				<div class="user_header">-->
      <!--					<img :src="data.user_icon" alt="">-->
      <!--				</div>-->
      <!--				<div class="user_name">-->
      <!--					<div class="user_all">-->
      <!--						<p class="user_nickname">{{data.username}}</p>-->
      <!--					</div>-->
      <!--				</div>-->
      <!--			</div>-->
      <!--			<div class="invite_code">-->
      <!--				<p class="invite_tips">{{$t('user.invite_code')}}</p>-->
      <!--				<div class="flex_center copy" v-clipboard="()=>data.invite_code" v-clipboard:success="copy">-->
      <!--					<p>{{data.invite_code}}</p>-->
      <!--					<img class="copy_img" src="../img/user/copy.png">-->
      <!--				</div>-->
      <!--			</div>-->
      <!--		</div>-->
      <!--		<div class="block_div flex_center money1">-->
      <!--			<div>-->
      <!--				<p @click="showMsg()">{{$t('user.fundingAccount')}}-->
      <!--					<van-icon name="question-o" size="14" style="left: 2px;top:1px;" />-->
      <!--				</p>-->
      <!--				<p>{{common.currency_symbol_basic()}}{{common.precision_basic(fundBalanceUsd)}}</p>-->
      <!--				<p class="money_usd">≈ {{common.precision(fundBalance)}} ({{currency}})</p>-->
      <!--			</div>-->
      <!--			<div class="recharge">-->
      <!--				<p @click="$router.push('/recharge')">{{$t('user.recharge')}}</p>-->
      <!--				<p @click="$router.push('/withdraw')">{{$t('user.withdraw')}}</p>-->
      <!--			</div>-->
      <!--		</div>-->
      <!--		<div class="block_div flex_center user_yw">-->
      <!--			<div @click="$router.push('/invest/record')">-->
      <!--				<img src="../img/user/order.png" alt="" />-->
      <!--				<p>{{$t('user.inviteRecord')}}</p>-->
      <!--			</div>-->
      <!--			<div @click="$router.push('/funding/record')">-->
      <!--				<img src="../img/user/details.png" alt="" />-->
      <!--				<p>{{$t('user.fundingDetails')}}</p>-->
      <!--			</div>-->
      <!--			<div @click="$router.push('/service')">-->
      <!--				<img src="../img/user/kf.png" alt="" />-->
      <!--				<p>{{$t('user.onlineService')}}</p>-->
      <!--			</div>-->
      <!--		</div>-->
      <!--		<div class="block_div list">-->
      <!--			<van-cell is-link v-for="(item,index) in menus1" :key="index" @click="$router.push(item.url)">-->
      <!--				<template #title>-->
      <!--					<img :src="require('../img/'+item.logo)" alt="">-->
      <!--					<span class="custom-title">{{item.title}}</span>-->
      <!--				</template>-->
      <!--			</van-cell>-->
      <!--		</div>-->
      <!--		<div class="block_div list">-->
      <!--			<van-cell is-link v-for="(item,index) in menus2" :key="index" @click="$router.push(item.url)">-->
      <!--				<template #title>-->
      <!--					<img :src="require('../img/'+item.logo)" alt="">-->
      <!--					<span class="custom-title">{{item.title}}</span>-->
      <!--				</template>-->
      <!--			</van-cell>-->
      <!--		</div>-->
      <!--		<button class="basic_btn logout_btn" @click="logout">{{$t('user.signOut')}}</button>-->
      <!--	</div>-->
    </div>
    <div class="bigTitle">
      个人中心
    </div>
    <div class="info">
      <img :src="data.user_icon" class="headImg">
      <div class="name">
        <div class="nameTop">{{data.username}}</div>
        <div class="nameBot" v-if="vipLogo">
          <img :src="vipLogo" class="titleImg">
          <div class="nameReal" @click="$router.push('/realName')"
          v-if="data.auth != 1"
          >实名认证</div>
      </div>
    </div>
      <div class="infoRight" v-clipboard="()=>data.invite_code" v-clipboard:success="copy">
        邀请码：{{data.invite_code}}
        <img src="@/assets/img/copyIcon.png"  class="IRImg">
      </div>
    </div>
    <div class="contWrap">
      <div class="contDeatil">
        <div class="teamTitle">
          <div class="teamTL">账户余额</div>
          <div class="teamTR"  @click="$router.push('/funding/record')">
            <div>资金明细</div>
            <div class="teamRight">
              <img src="@/assets/img/teamWhite.png">
            </div>
          </div>
        </div>
        <div class="count">
          {{data.money}}<span style="font-size: 18px">U</span>
        </div>
        <div class="btnW">
          <div class="btnItem" @click="$router.push('/rechargeNow')">充值</div>
          <div class="btnItem"  @click="$router.push('/withdraw')">提现</div>
        </div>
      </div>
<!--      <div class="point">-->
<!--        <div class="pointLeft">-->
<!--          积分：{{data.point}}-->
<!--        </div>-->
<!--        <div class="pointRight">-->
<!--           <div>开盲盒次数：{{data.draw_num}}</div>-->
<!--          <img src="@/assets/img/question.png" class="pointRightImg">-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="tabs">
<!--      /draw/record-->
      <div class="tabItem tabItemOne" @click="$router.push('/draw/record')">
        <img src="@/assets/img/reward.png" class="tabItemLeft">
        <div>我的奖励</div>
      </div>
      <div class="tabItem tabItemTwo" @click="$router.push('/invest/record')">
        <img src="@/assets/img/investor.png" class="tabItemLeft">
        <div>投资记录</div>
      </div>
      <div class="tabItem tabItemTwo" @click="$router.push('/recharge/record')">
        <img src="@/assets/img/toMoney.png" class="tabItemLeft">
        <div>充值记录</div>
      </div>
      <div class="tabItem tabItemThree" @click="$router.push('/withdraw/record')">
        <img src="@/assets/img/wallet.png" class="tabItemLeft">
        <div>提现记录</div>
      </div>
    </div>
    <div class="optionsList">
      <div class="opItem" @click="openDio(1,data.usdt_address)">
        <img src="@/assets/img/op1.png" class="opItemLeft">
        <div class="opItemRight">
          <div class="opTex">
            {{data.usdt_address ? '修改USDT':'绑定USDT'}}
          </div>
          <img src="@/assets/img/rightGray.png" class="opImg">
        </div>
      </div>
      <div class="opItem" @click="openDio(2,data.address)">
        <img src="@/assets/img/op5.png" class="opItemLeft">
        <div class="opItemRight">
          <div class="opTex">
            我的地址
          </div>
          <img src="@/assets/img/rightGray.png" class="opImg">
        </div>
      </div>
      <div class="opItem" @click="$router.push({
      path:'/changePassword',
     query:{
        type:2
      }
      })">
        <img src="@/assets/img/op6.png" class="opItemLeft">
        <div class="opItemRight">
          <div class="opTex">
            修改支付密码
          </div>
          <img src="@/assets/img/rightGray.png" class="opImg">
        </div>
      </div>
      <div class="opItem" @click="$router.push({
      path:'/changePassword',
      query:{
        type:1
      }
      })">
        <img src="@/assets/img/op7.png" class="opItemLeft">
        <div class="opItemRight">
          <div class="opTex">
            修改登录密码
          </div>
          <img src="@/assets/img/rightGray.png" class="opImg">
        </div>
      </div>
<!--      passwordManage-->
<!--            <div class="opItem" @click="$router.push('/passwordManage')">-->
<!--              <img src="@/assets/img/op2.png" class="opItemLeft">-->
<!--              <div class="opItemRight">-->
<!--                <div class="opTex">-->
<!--                  密码管理-->
<!--                </div>-->
<!--                <img src="@/assets/img/rightGray.png" class="opImg">-->
<!--              </div>-->
<!--            </div>-->
<!--      /questions-->
<!--      <div class="opItem" @click="$router.push('/questions')">-->
<!--        <img src="@/assets/img/op3.png" class="opItemLeft">-->
<!--        <div class="opItemRight">-->
<!--          <div class="opTex">-->
<!--            常用问题-->
<!--          </div>-->
<!--          <img src="@/assets/img/rightGray.png" class="opImg">-->
<!--        </div>-->
<!--      </div>-->
      <div class="opItem" @click="kefu_to">
        <img src="@/assets/img/op4.png" class="opItemLeft">
        <div class="opItemRight">
          <div class="opTex">
            客服中心
          </div>
          <img src="@/assets/img/rightGray.png" class="opImg">
        </div>
      </div>
    </div>
    <div class="loginBtn">
      <div class="btn" @click="logout">退出登录</div>
    </div>
    <van-dialog v-model="showAdressDia" :showCancelButton="false" :showConfirmButton="false" :closeOnClickOverlay="true">
       <div class="diologWrap">
         <div class="dioTilte" v-if="currentType == 1">{{data.usdt_address ? '修改USDT':'绑定USDT'}}</div>
         <div class="dioTilte" v-else>{{data.address ? '如需修改请找客服':'填写地址'}}</div>
         <div>
           <textarea  type="textarea" placeholder="请输入地址" v-model="dioInputValue" :disabled="!!(currentType == 2 && data.address)" />
         </div>
         <div style="margin-top: 10px">
           <input type="password" placeholder="请输入支付密码" v-model="usdtPsw" v-if="currentType == 1">
         </div>
         <div class="dioBtnWrap">
           <div class="dioBtn leftBtn" @click="showAdressDia = false">取消</div>
           <div class="dioBtn rightBtn" @click="toSureDia">确定</div>
         </div>
       </div>
    </van-dialog>
  </div>
</template>

<script>
	import Vue from 'vue';
	import qs from 'qs';
	import Fetch from '../../utils/fetch';
	import Api from "../../interface/index";
	import Clipboard from "v-clipboard";
	import {
		Icon,
		Cell,
		CellGroup
	} from "vant";

	Vue.use(Cell).use(CellGroup).use(Icon).use(Clipboard);

	export default {
		name: "user",
		components: {},
		data() {
			return {
				currency: '',
				menus1: [{
						"title": this.$t('savings.savings'),
						"value": '',
						"logo": "user/savings.png",
						"url": "/savings"
					},{
						"title": this.$t('user.vip'),
						"value": '',
						"logo": "user/vip.png",
						"url": "/vip"
					},
					{
						"title": this.$t('user.rewards'),
						"value": '',
						"logo": "user/rewards.png",
						"url": "/rewards"
					},
					{
						"title": this.$t('user.rechargeRecord'),
						"value": '',
						"logo": "user/recharge.png",
						"url": "/recharge/record"
					},
					{
						"title": this.$t('user.withdrawRecord'),
						"value": '',
						"logo": "user/cash.png",
						"url": "/withdraw/record"
					},
					{
						"title": this.$t('user.withdrawAccount'),
						"value": '',
						"logo": "user/moneybag.png",
						"url": "/wallet"
					},
					{
						"title": this.$t('user.certificationCenter'),
						"value": '',
						"logo": "user/auth1.png",
						"url": "/auth"
					}
				],
				menus2: [
					// {
					// 	"title": this.$t('user.userAgreement'),
					// 	"logo": "user/agreement.png",
					// 	"url": "/language"
					// },
					// {
					// 	"title": this.$t('user.privacyPolicy'),
					// 	"logo": "user/secret.png",
					// 	"url": "/language"
					// },
					{
						"title": this.$t('user.languagePreference'),
						"value": '',
						"logo": "user/language.png",
						"url": "/language"
					},
					{
						"title": this.$t('user.faq'),
						"value": '',
						"logo": "user/question.png",
						"url": "/questions"
					}
				],
				data: {},
				fundBalance: 0.00,
				fundBalanceUsd: 0.00,
				savings: 0.00,
				eye: 1,
				signinStatue:false,
        dioInputValue:'',
        showAdressDia:false,
        currentType:1,
        usdtPsw:'',
        vipLogo:''
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#051C3F');
				plus.navigator.setStatusBarStyle('light');
			}
			this.$parent.footer('user');
		},
		mounted() {
			this.start();
		},
		methods: {
      kefu_to() {
        const currentTime = new Date();
        const currentHour = currentTime.getHours();
        const currentMinute = currentTime.getMinutes();
        if (
            (currentHour === 9 && currentMinute >= 0) ||
            (currentHour > 9 && currentHour < 23) ||
            (currentHour === 23 && currentMinute === 0)
        ) {
          Fetch('/index/service_list').then(res => {
            if(res.data && res.data.list.length > 0){
              this.$router.push('/service/' + res.data.list[0].id);
            }
          })
        } else {
          this.$toast('客服服务时间早上9点--晚上11点');
        }
      },
      initDio(){
        this.showAdressDia = false
        this.dioInputValue = ''
        this.start();
      },
      toSureDia(){
        let that = this
        if(this.currentType == 1){
          if(!this.dioInputValue || !this.usdtPsw){
            this.$toast('请填写完整信息');
            return
          }
          Fetch('/user/bindUsdtAddress',{
            usdt_address:this.dioInputValue,
            pay_password:this.usdtPsw
          }).then((r) => {
            this.$toast('操作成功');
            that.initDio()
          });
        }
        if(this.currentType == 2){
          if(!this.dioInputValue){
            this.$toast('请填写完整信息');
            return
          }
          if(this.data.address){
            this.$toast('请找客服修改');
            return;
          }
          Fetch('/user/setInfo',{
            address:this.dioInputValue,
          }).then((r) => {
            this.$toast('操作成功');
            that.initDio()
          });
        }
        this.usdtPsw = ''
      },
      openDio(type,value){
        this.currentType = type
        this.dioInputValue = value
        this.showAdressDia = true
      },
			copy() {
				this.$toast(this.$t('recharge.copySuccess'));
			},
			showMsg() {
				this.$dialog.alert({
					closeOnClickOverlay: true,
					showConfirmButton: false,
					message: "<p style='text-align: left'>" +
						this.$t('user.fundingTips') +
						"</p>",
				}).catch(() => {
					// on close
				});
			},
			signin(){
				if(this.signinStatue){
					this.$toast(this.$t('user.signined'));
					return false;
				}
				this.signinStatue = true;
				Fetch('/user/signin').then((r) => {
					this.$toast(this.$t('user.signinSuccess'));
				});
			},
			start() {
				var isapp = 0;
				if (window.plus) {
					isapp = 1;
				}
				Fetch('/user/info', {
					isapp: isapp
				},'',false).then((r) => {
					this.data = r.data;
					this.fundBalance = r.data.fundBalance;
					this.fundBalanceUsd = r.data.fundBalanceUsd;
					this.menus1[0]['value'] = r.data.vip_name;
					this.currency = r.data.currency;
					this.vipLogo = r.data.vip.logo;
					this.signinStatue = r.data.signin;
				});
			},
			logout() {
				localStorage.removeItem('token');
				this.$router.replace("/");
			},
		}
	};
</script>

<style lang="less" scoped>
.diologWrap{
   padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  .dioTilte{
    font-weight: bold;
    margin-bottom: 18px;
  }
  textarea{
    background: #F2F2F2;
    padding: 14px 10px;
    border-radius: 8px;
    width: 70vw;
    height: 40px;
  }
  input{
     background: #F2F2F2;
     height: 40px;
     padding-left: 14px;
     border-radius: 8px;
     width: 70vw;
  }
  .dioBtnWrap{
    display: flex;
    margin-top: 16px;
    .dioBtn{
       width: 33vw;
      height: 38px;
      background: tan;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .leftBtn{
      background: #F2F2F2;
      margin-right: 10px;
    }
    .rightBtn{
      background: linear-gradient(0deg, #1348FF 0%, #018DFF 100%);
      color: #ffffff;
    }
  }
}
	.user_wrap {
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    padding: 31px 16px 60px;
    .bigTitle{
      font-size: 16px;
      font-weight: Bold;
      text-align: center;
      padding-bottom: 37px;
    }
    .info{
      display: flex;
      .headImg{
        width: 56px;
        height: 56px;
        border-radius: 28px;
        margin-right: 10px;
      }
      .name{
        flex: 1;
        .nameTop{
          font-size: 16px;
        }
        .nameBot{
          display: flex;
          align-items: center;
          margin-top: 8px;
          .titleImg{
            width: auto;
            height: 16px;
            margin-right: 8px;
          }
          .nameReal{
            width: 63px;
            height: 16px;
            background: #B0D0FF;
            border-radius: 7px 7px 7px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #0069FF;
          }
          .nameVip{
            color: #0069FF;
            padding: 2px 8px;
            background: #B0D0FF;
            border-radius: 8px 8px 8px 0px;
            font-size: 12px;
          }
        }
      }
      .infoRight{
        display: flex;
        font-size: 14px;
        .IRImg{
          width: 16px;
          height: 16px;
          margin-left: 5px;
        }
      }
    }
    .contWrap{
      background: linear-gradient(180deg, #A0C7FF 0%,#A0C7FF 70%, #E3F1FE 100%);
      border-radius: 8px;
      .contDeatil{
        margin-top: 16px;
        height: 145px;
        background: linear-gradient(90deg, #018DFF 0%, #0038FF 100%);
        border-radius: 8px;
        box-sizing: border-box;
        padding: 15px 16px 16px;
        .teamTitle{
          display: flex;
          align-items: center;
          color: #FFFFFF;
          .teamTL{
            flex: 1;
            font-size: 14px;
          }
          .teamTR{
            display: flex;
            align-items: center;
            .teamRight{
              margin-left: 5px;
              font-size: 12px;
              img{
                margin-top: 3px;
                width: 18px;
                height: 18px;
              }
            }
          }
        }
        .count{
          font-size: 24px;
          color: #ffffff;
          font-weight: bold;
          text-align: center;
          margin: 17px 0 16px;
        }
        .btnW{
          display: flex;
          justify-content: space-between;
          .btnItem{
            width: 40vw;
            height: 36px;
            background: rgba(217,244,254,0.1);
            border-radius: 6px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .point{
        height: 37px;
        display: flex;
        align-items: center;
        padding-left: 17px;
        padding-right: 50px;
        font-size: 14px;
        .pointLeft{
           flex: 1;
        }
        .pointRight{
          display: flex;
          align-items: center;
          .pointRightImg{
            margin-left: 10px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .tabs{
      display: flex;
      justify-content: space-between;
      .tabItem{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 29vw;
        height: 52px;
        padding-left: 8px;
        border-radius: 8px;
        margin-top: 16px;
        .tabItemLeft{
           width: 36px;
           height: 36px;
           font-size: 14px;
          margin-bottom: 8px;
        }
      }
    }
    .optionsList{
      background: #FFFFFF;
      margin-top: 16px;
      border-radius: 8px;
      .opItem{
        display: flex;
        align-items: center;
        height: 44px;
        padding-left: 10px;
        font-size: 14px;
        .opItemLeft{
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        .opItemRight{
          flex: 1;
          display: flex;
          border-bottom: 1px solid #E9E9E9;
          height: 100%;
          align-items: center;
          .opTex{
              flex: 1;
          }
          .opImg{
            width: 16px;
            height: 16px;
            margin-right: 10px;
          }
        }
      }
      .opItem:last-child{
        .opItemRight{
          border-bottom: 1px solid #ffffff;
        }
      }
    }
    .loginBtn{
      display: flex;
      justify-content: center;
      margin-top: 42px;
      .btn{
         width: 78vw;
        height: 40px;
        background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
        color: #ffffff;
        font-size: 14px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
	}
</style>
